<template>
    <div class="content-textarea">
        <div class="title">
            <slot name="title">{{title}}</slot>
        </div>
          <van-field
          :value="value"
           v-bind="optionConfig"
           @input="handleInput"
          />
    </div>
</template>

<script>
export default {
  inheritAttrs: false,
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    maxlength: {
      type: [String, Number],
      default: 200
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      option: {
        rows: '2',
        autosize: true,
        type: 'textarea',
        showWordLimit: true,
        maxlength: this.maxlength,
        placeholder: `请输入内容，不超过${this.maxlength}个字`
      }
    }
  },
  computed: {
    optionConfig() {
      return Object.assign({ }, this.option, this.$attrs)
    }
  },
  methods: {
    handleInput(value) {
      this.$emit('input', value)
    }

  }

}
</script>

<style lang="scss" scoped>
.content-textarea {
    .title {
        height: 0.96rem;
        line-height: 0.96rem;
        font-size: 0.32rem;
        font-weight: 500;
        color: #333;
      }
    /deep/.van-cell {
          background: rgba(245, 245, 245, 1);
          border-radius: 0.16rem;
        }
    }
</style>
